$(document).ready(function () {
  // 绑定事件
  $('.my-todo .bijiao').click(function () {
    alert('比牌')
  })

  $('.my-todo .my-yikanpaimian').click(function () {
    $('.my-todo .my-yikanpaimian').hide()
    $('.my-todo .my-paimian').show()
  })

  $('.my-todo .my-paimian').click(function () {
    $('.my-todo .my-paimian').hide()
    $('.my-todo .my-yikanpaimian').show()
  })

  // 加注
  var zIndex = 0
  $('.annotation-count .jiazhu').click(function () {
    console.log(this.dataset.annotationCount)
    console.log(this.src)
    var top = Math.round(Math.random() * 110) / 37.5
    var left = Math.round(Math.random() * 90) / 37.5
    zIndex += 1
    $('.table-note-imgs').append('<img src="' + this.src + '" style="' + 'z-index: ' + zIndex + '; top: ' + top + 'rem; left: ' + left + 'rem;">')
  })

  var url = 'https://game.royal-lucifer.top'
  var con = $.hubConnection(url)
  var proxy = con.createHubProxy('game')
  proxy.on('updateRoom',
    function (e) {
      var x = JSON.stringify(e)
      alert(x)
      var temp = ''
      temp += "<div class='user'>"
      temp += "<div class='user-detail'>"
      temp += "<img src='" + e.avatar + "'>"
      temp += '<div>' + e.nickname + '</div>'
      temp += '<div>' + e.points + '</div>'
      temp += '</div>'
      temp += "<div class='paimian'>"
      temp += "<img src='/images/他人牌背面.png' >"
      temp += '</div>'
      temp += '</div>'

      $('#users').append(temp)
    })
  con.start().done(function () {
    $('#btnJoin').bind('click',
      function () {
        var roomid = $('#roomid').val()
        var uid = $('#uid').val()
        var jmodel = {
          roomid: roomid,
          uid: uid
        }
        proxy.invoke('joinRoom', jmodel)
      })
  })
})
